import QtQuick 2.2
import QtQml 2.2

Rectangle {

    property var title: new Array
    property var image: new Array
    property list<TailItem> itemlist
    property int rowindex: 0

    signal getMessage(string content, string picpath)
    signal onclicktail(int index)

    //获得当前row中空闲的Item
    function getEmptyItem()
    {
        for(var i=0; i< 6; i++)
        {
            if(row.children[i].visible === false)
                return i
        }
        return -1
    }

    //选项卡删除的时候要往前挪一位
    function reArrange(index)
    {
        var i =index
        while( i<5 && row.children[i+1].content !== ""/*row.children[i+1].content !=="" &&*/ )
        {
            row.children[i].content = row.children[i+1].content
            row.children[i].picpath = row.children[i+1].picpath
           // row.children[i].isclick = row.children[i+1].isclick
            row.children[i].visible = row.children[i+1].visible

            title[i] = title[i+1]
            image[i] = image[i+1]

            i++
        }

        row.children[i].release()
    }

    function reDrawItem(index)
    {
        for(var i=0 ; i< 6; i++)
        {
            if(i === index)
            {
                row.children[i].backcolor = "#808080"
                row.children[i].isclick = true
            }
            else
            {
                row.children[i].backcolor = "#E3E3E3"
                row.children[i].isclick = false
            }
        }
    }

    function close()
    {
        //获得当前显示的选项卡
        var i
        for(i= 0; i < 6; i++)
        {
            if(row.children[i].isclick === true)
            {
                reArrange(i)
                break
            }
        }
        if(row.children[i].content !== "")
            reDrawItem(i)
        else if(i -1 >= 0)
            reDrawItem(i-1);
    }

    Row{
        id: row
        spacing: 2
        anchors.fill: parent
        TailItem{id: item1; width: parent.width/6; clickcolor: "#808080"; index: 0; bordercolor: "black"; borderwidth: 1}
        TailItem{id: item2; width: parent.width/6; clickcolor: "#808080"; index: 1; bordercolor: "black"; borderwidth: 1}
        TailItem{id: item3; width: parent.width/6; clickcolor: "#808080"; index: 2; bordercolor: "black"; borderwidth: 1}
        TailItem{id: item4; width: parent.width/6; clickcolor: "#808080"; index: 3; bordercolor: "black"; borderwidth: 1}
        TailItem{id: item5; width: parent.width/6; clickcolor: "#808080"; index: 4; bordercolor: "black"; borderwidth: 1}
        TailItem{id: item6; width: parent.width/6; clickcolor: "#808080"; index: 5; bordercolor: "black"; borderwidth: 1}
    }

    onGetMessage:{
        console.log(qsTr("TailItemBar从Tail处获得了关于"+content+"的消息\n\t\t\t===========TailItemBar"))
        if(getEmptyItem() !== -1)
        {
            var idx = getEmptyItem()
            title.push(content)
            image.push(picpath)
            console.log(item1.content)
            //        item1.content = content
            //        item1.picpath = picpath
            //        item1.visible = true
            row.children[idx].content = title[idx];
            row.children[idx].picpath = image[idx]
            row.children[idx].visible = true
            reDrawItem(idx)

            for(var i =0; i<6; i++)
            {
                console.log(qsTr("row.children["+i+"].content = "+row.children[i].content))
            }
           // rowindex ++;
        }
    }

    MouseArea{
        onClicked: {
            reDrawItem(row.childAt(mouse.x, mouse.y).index)

            console.log("将点击到的TailBar 中的选项卡的 index 发送出去 \t\t\t TailItemBar");
            onclicktail(row.childAt(mouse.x, mouse.y).index)
        }
        anchors.fill: parent
    }
}

